import React, { useEffect, useState, useRef, createRef, useMemo } from 'react'
import { 
  Card,
  Input,
  Button
} from 'antd'

import HooksList from './components/HooskList'
import useHooksList from './components/HooskList'

const HooksTodoList: React.FC = () => {
  const [todoList, setTodoList] = useState<string[]>([])
  const [value, setValue] = useState<string>('')
  const addTodo = useRef<any | null>(null)
  const [list, index] = useHooksList(todoList)
  // const addTodo = createRef<any>()
  const getTodoLIst = () => {
    let todoList: string | null = window.sessionStorage.getItem('todolisthooks')
    return todoList && JSON.parse(todoList) || []
  }
  // const Aa = useMemo(() => {
  //   // return () => (
  //   //   <HooksList data={todoList}/>
  //   // )
  //   console.log('我被触发了')
  //   return list
  // }, [todoList])

  // 页面初始化获取列表
  useEffect(() => {
    setTodoList(getTodoLIst())
  }, [])

  // 监听index变化
  useEffect(() => {
    console.log('index发生了变化')
    todoList.splice(index, 1)
    setTodoList([...todoList])
  }, [index])

  return (
    <div>
      <Card>
      <Input.Group compact>
        <Input ref={addTodo} value={value} style={{ width: 'calc(100% - 70px)' }} onChange={(event) => {
          setValue(event.target.value)
        }} placeholder="请输入您想添加的事项" />
        <Button type="primary" onClick={() => {
          setTodoList([...todoList, addTodo.current.input.value])
          setValue('')
        }}>添加</Button>
      </Input.Group>
      {/* <Aa /> */}
      {list}
      </Card>
    </div>
  )
}

export default HooksTodoList